import {Headers} from './header';
import {Sidebar} from './sidebar';
// import {Footers} from './footer';
import Bundle from './router/Bundle';
import HomeContainer from 'bundle-loader?lazy!./router/home/index';
import HplusContainer from 'bundle-loader?lazy!./router/hplus/index';
import './css/layout.less';
import emitter from '../utils/events';
import createHashHistory from 'history/createHashHistory';

const Home = (props) => (
    <Bundle load={HomeContainer}>
        {(Homes) => <Homes/>}
    </Bundle>
);

const Hplus = (props) => (
    <Bundle load={HplusContainer}>
        {(Hplus) => <Hplus/>}
    </Bundle>
);

export class Layouts extends React.Component {
    constructor(props, context) {
        super(props);
        this.props = props;
        this.context = context;
        this.state = {
            current: 'mail',
            activeKey: '0',
            data: [],
            keys: [],
        };
        this.handleClick = this.handleClick.bind(this);
        this.init = this.init.bind(this);
    };

    handleClick(e) {
        this.setState({
            current: e.key,
        });
    }

    componentWillMount() {
        let self = this;
        this.eventEmitter = emitter.addListener('changeMessage', (data, count) => {
            let datas = self.state.data;
            let keys = self.state.keys;
            if (datas.indexOf(data) === -1) {
                console.log(data);
                datas.push(data);
                keys.push(count);
            }
            // count = parseInt(count) + 1;
            console.log(data);
            self.setState({
                data: datas,
                keys: keys,
                activeKey: count.toString(),
            });
        });
    }

    // componentWillReceiveProps(nextProps, nextContext) {
    //     this.setState({
    //         data: nextContext.data,
    //     });
    // }


    remove(targetKey) {
        console.log(targetKey);
        let data = this.state.data;
        console.log(data);
        let self = this;
        let index = 0;
        let keys = self.state.keys;
        if (keys.indexOf(parseInt(targetKey)) !== -1) {
            index = keys.indexOf(parseInt(targetKey));
            keys.splice(index, 1);
        }
        data.splice(index, 1);
        let c = 0;
        if (keys.length > 0) {
            c = keys[keys.length - 1];
        }
        this.setState({
            data: data,
            keys: keys,
            activeKey: c.toString(),
        });
        let history = createHashHistory();
        if (index === 0) {
            history.push({
                pathname: '/',
            });
        } else {
            history.push({
                pathname: data[keys.indexOf(parseInt(c))].link,
            });
        }
    }

    /*
    * if (this.state.data.length > 0) {
            console.log(this.state.data)
            let lists = this.state.data.map((values, count) => {
                let counts = count + 1;
                return <Antd.Tabs.TabPane tab={
                    1111
                } key={counts} closable={false}> 111
                </Antd.Tabs.TabPane>;
            });
            return <Antd.Tabs
                activeKey={0}
                type="editable-card">
                <Antd.Tabs.TabPane tab={
                    111
                } key={0}> 111
                </Antd.Tabs.TabPane>;
                {lists}
            </Antd.Tabs>;
        } else {
            return <Antd.Tabs
                activeKey={this.state.activeKey}
                type="editable-card">
                <Antd.Tabs.TabPane tab={
                    <span>111</span>
                } key={'0'} closable={false}>
                    111
                </Antd.Tabs.TabPane>;
            </Antd.Tabs>;
        }
    * */
    onChange(key) {
        console.log(key);
        this.setState({activeKey: key});
    }


    removeAll() {
        this.setState({
            data: [],
            keys: [],
            activeKey: '0',
        });
        let history = createHashHistory();
        history.push({
            pathname: '/',
        });
    }


    onEdit(targetKey, action) {
        this[action](targetKey);
    }

    init() {
        if (this.state.data.length > 0) {
            let lists = this.state.data.map((values, count) => {
                let counts = count + 1;
                return <Antd.Tabs.TabPane tab={
                    <ReactRouterDom.Link to={values.link}>
                        <Antd.Icon type={values.type}/>
                        <span>{values.value}</span>
                    </ReactRouterDom.Link>
                } key={values.key}/>;
            });
            return <Antd.Tabs hideAdd onChange={this.onChange.bind(this)} onEdit={this.onEdit.bind(this)}
                              activeKey={this.state.activeKey} tabBarExtraContent={
                <Antd.Button onClick={this.removeAll.bind(this)}>
                    <Antd.Icon type="close"/>
                    关闭所有
                </Antd.Button>
            } type="editable-card">
                <Antd.Tabs.TabPane tab={
                    <ReactRouterDom.Link to="/">
                        <Antd.Icon type="pie-chart"/>
                        <span>首页</span>
                    </ReactRouterDom.Link>
                } key={'0'} closable={false}/>
                {lists}
            </Antd.Tabs>;
        }
        return <Antd.Tabs hideAdd onChange={this.onChange.bind(this)} onEdit={this.onEdit.bind(this)}
                          activeKey={this.state.activeKey}
                          tabBarExtraContent={
                              <Antd.Button onClick={this.removeAll.bind(this)}>
                                  <Antd.Icon type="close"/>
                                  关闭所有
                              </Antd.Button>
                          } type="editable-card">
            <Antd.Tabs.TabPane tab={
                <ReactRouterDom.Link to="/">
                    <Antd.Icon type="pie-chart"/>
                    <span>首页</span>
                </ReactRouterDom.Link>
            } key={'0'} closable={false}/>
        </Antd.Tabs>;
    }

    getChildContext() {
        let self = this;
        return {
            languages: self.props.languages,
            data: [],
        };
    }

    componentDidMount() {
        let self = this;
        this.setState({
            data: [],
        });
    }

    componentWillUnmount() {
        emitter.removeListener(this.eventEmitter);
    }

    render() {
        return (<div>
                <Headers/>
                <Antd.Layout className="content">
                    <Sidebar/>
                    <Antd.Layout>
                        <Antd.Layout.Header className="my-bg-transparent my-mt-30">
                            {this.init()}
                        </Antd.Layout.Header>
                        <Antd.Layout.Content className="my-bg-transparent my-plr-50">
                            <ReactRouterDom.Switch ref="routers">
                                <ReactRouterDom.Route path="/" exact component={Home}/>
                                <ReactRouterDom.Route path="/hplus" exact component={Hplus}/>
                            </ReactRouterDom.Switch>
                        </Antd.Layout.Content>
                        <Antd.Layout.Footer className="my-text-center">
                            Ant Design ©2016 Created by Ant UED
                        </Antd.Layout.Footer>
                    </Antd.Layout>
                </Antd.Layout>
            </div>
        );
    };
}

Layouts.childContextTypes = {
    data: PropTypes.object.isRequired,
    languages: PropTypes.object.isRequired,
};


export default ReactRouterDom.withRouter(Layouts);
